<template>
  <!--  表：参保人数  -->
  <div class="insured-box">
    <div class="subtitle-short insured-titleSize">参保人数</div>
    <div id="table_insured" class="insured-tableSize"/>
  </div>
</template>

<script>
import echarts from "_echarts@4.9.0@echarts";
import axios from "_axios@0.25.0@axios";
import api from "@/api/gs";

export default {
  name: "table_insured",
  data() {
    return {
      // 数据源
      tableData: {
        month: [], // 数据月份
        injuryOrdinary: [], // 普通工伤
        injuryArchitecture: [] // 建筑工伤
      }
    }
  },
  mounted() {
    this.getInsured();
  },
  methods: {
    tableInit_insured() {
      const myChart = echarts.init(document.getElementById("table_insured"))
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '20%',
          right: '0%',
          bottom: '15%',
          left: '13%'
        },
        // 图例
        legend: {
          right: '0%',
          textStyle: {
            color: '#fff'
          },
          data: ['普通工伤', '建筑工伤'],
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          data: this.tableData.month,
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: '人',
            min: 0,
            max: 300000,
            interval: 60000,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '普通工伤',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            barWidth: 9,
            data: this.tableData.injuryOrdinary,
            itemStyle: {
              normal: {
                opacity: 1,
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#081D39" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "#43A9FF" // 100% 处的颜色
                }], false),
              }
            },
          },
          {
            name: '建筑工伤',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.tableData.injuryArchitecture,
            barWidth: 9,
            itemStyle: {
              normal: {
                opacity: 1,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#E0752F'
                }, {
                  offset: 1,
                  color: '#06152A'
                }]),
              }
            },
          }
        ]
      }
      option && myChart.setOption(option);
    },
    // 获取工伤参保数据
    getInsured: function () {
      let param = {};
      param.areaCode = '330784';
      param.startYear = '202107';
      param.endYear = '202112';

      axios.post(api.getFundInAndOut, param).then(res => {
        const result = res.data.result;
        let month = ''; // 月份
        let date = ''; // 数据年月
        for (const item of result) {
          date = item.dqny;
          month = date.slice(-2) + '月';
          if (date.slice(-2, -1) == '0') {
            month = date.slice(-1) + '月';
          }
          this.tableData.month[this.tableData.month.length] = month;
          this.tableData.injuryOrdinary[this.tableData.injuryOrdinary.length] = item.ptgscbrs;
          this.tableData.injuryArchitecture[this.tableData.injuryArchitecture.length] = item.jzgscbrs;
        }
        this.tableInit_insured();
      }).catch(err => {
        console.log(err)
      });
    }
  }
}
</script>

<style scoped>
.insured-box {
  height: 28%;
  width: 100%;
}

.insured-titleSize {
  height: 18%;
  line-height: 170%;
}

.insured-tableSize {
  width: 100%;
  height: 80%;
}
</style>
